<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ name: 'base' }">仓库系统</el-breadcrumb-item>
        <el-breadcrumb-item>商品收发汇总表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="together-content">
      <!-- 搜索区域 -->
      <div class="search-form">
        <el-form :inline="true" :model="searchForm" size="small">
          <el-form-item label="单据日期">
            <el-date-picker
              v-model="searchForm.startDate"
              type="date"
              placeholder="开始日期"
              value-format="YYYY-MM-DD"
              clearable
              style="width: 120px"
            />
            <span style="margin: 0 5px;">至</span>
            <el-date-picker
              v-model="searchForm.endDate"
              type="date"
              placeholder="结束日期"
              value-format="YYYY-MM-DD"
              clearable
              style="width: 120px"
            />
          </el-form-item>

          <el-form-item label="仓库">
            <el-input v-model="input" readonly placeholder="选择仓库" @click="warehouseVisible = true" style="width: 180px"/>
          </el-form-item>

          <el-form-item label="商品">
            <el-select
              v-model="searchForm.productName"
              placeholder="请选择商品"
              clearable
              filterable
              style="width: 150px"
            >
              <el-option
                v-for="name in uniqueProductNames"
                :key="name"
                :label="name"
                :value="name"
              />
            </el-select>
          </el-form-item><br/>

          <el-form-item label="商品类别">
            <el-select
              v-model="searchForm.category"
              placeholder="请选择类别"
              clearable
              style="width: 130px"
            >
              <el-option
                v-for="cat in uniqueCategories"
                :key="cat"
                :label="cat"
                :value="cat"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 仓库搜索列表弹出对话框 -->
        <el-dialog
          v-model="warehouseVisible"
          title="仓库搜索列表"
          width="40%"
          style="height: auto;"
          draggable
          :show-close="true">
          <!-- 调用仓库的搜索组件 -->
          <WareHouse ref="warehouseRef" :info="{selection: true, no: false, name: true, code: true, status: false, op: false, outButton: true}"/>
          <br/><br/>
        </el-dialog>

        <!-- 分割线 -->
        <el-divider style="margin: 5px 0" />
      </div>

      <!-- 导出和打印按钮 -->
      <div class="table-header-buttons">
        <el-button type="primary" size="small" @click="handleExport">导出</el-button>
        <el-button size="small" @click="handlePrint">打印</el-button>
      </div><br/>
      

      <!-- 表格容器 -->
      <el-table
        :data="displayData"
        border
        stripe
        :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold' }"
        style="width: 100%"
        :max-height="450"
        v-loading="loading"
        show-summary
        sum-text="总计"
      >
        <!-- 固定列 -->
        <el-table-column prop="productCode" label="商品编码" width="120" align="center" />
        <el-table-column prop="productName" label="商品名称" width="150" fixed align="center" />
        <!-- <el-table-column prop="barcode" label="商品条码" width="150" align="center" /> -->
        <el-table-column prop="specification" label="规格型号" width="120" align="center" />
        <!-- <el-table-column prop="brand" label="品牌" width="100" align="center" /> -->
        <el-table-column prop="rack" label="库位" width="80" align="center" />
        <el-table-column prop="unit" label="单位" width="80" align="center" />
        <el-table-column prop="warehouseCode" label="仓库编号" width="100" align="center" />
        <el-table-column prop="warehouse" label="仓库" width="100" align="center" />
        <el-table-column prop="remark" label="商品备注" width="120" align="center" />

        <!-- 期初 -->
        <el-table-column label="期初" align="center">
          <el-table-column label="数量" width="100" align="center" prop="initialQty" />
          <el-table-column label="成本" width="100" align="center" prop="initialCost">
            <template #default="{ row }">
              {{ Number(row.initialCost).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 普通采购 -->
        <el-table-column label="普通采购" align="center">
          <el-table-column label="数量" width="100" align="center" prop="purchaseQty" />
          <el-table-column label="成本" width="100" align="center" prop="purchaseCost">
            <template #default="{ row }">
              {{ Number(row.purchaseCost).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 销售退回 -->
        <el-table-column label="销售退回" align="center">
          <el-table-column label="数量" width="100" align="center" prop="returnSalesQty" />
          <el-table-column label="成本" width="100" align="center" prop="returnSalesCost">
            <template #default="{ row }">
              {{ Number(row.returnSalesCost).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 其他入库 -->
        <el-table-column label="其他入库" align="center">
          <el-table-column label="数量" width="100" align="center" prop="otherInQty" />
          <el-table-column label="成本" width="100" align="center" prop="otherInCost">
            <template #default="{ row }">
              {{ Number(row.otherInCost).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 成本调整 -->
        <el-table-column label="成本调整" align="center">
          <el-table-column label="数量" width="100" align="center" prop="costAdjustQty" />
          <el-table-column label="成本" width="100" align="center" prop="costAdjustCost">
            <template #default="{ row }">
              {{ Number(row.costAdjustCost).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 组装单 -->
        <el-table-column label="组装单" align="center">
          <el-table-column label="数量" width="100" align="center" prop="assemblyQty" />
          <el-table-column label="成本" width="100" align="center" prop="assemblyCost">
            <template #default="{ row }">
              {{ Number(row.assemblyCost).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 入库合计 -->
        <el-table-column label="入库合计" align="center">
          <el-table-column label="数量" width="100" align="center" prop="inTotalQty" />
          <el-table-column label="成本" width="100" align="center" prop="inTotalCost">
            <template #default="{ row }">
              {{ Number(row.inTotalCost).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 采购退回 -->
        <el-table-column label="采购退回" align="center">
          <el-table-column label="数量" width="100" align="center" prop="returnPurchaseQty" />
          <el-table-column label="成本" width="100" align="center" prop="returnPurchaseCost">
            <template #default="{ row }">
              {{ Number(row.returnPurchaseCost).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 普通销售 -->
        <el-table-column label="普通销售" align="center">
          <el-table-column label="数量" width="100" align="center" prop="salesQty" />
          <el-table-column label="成本" width="100" align="center" prop="salesCost">
            <template #default="{ row }">
              {{ Number(row.salesCost).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 出库合计 -->
        <el-table-column label="出库合计" align="center">
          <el-table-column label="数量" width="100" align="center" prop="outTotalQty" />
          <el-table-column label="成本" width="100" align="center" prop="outTotalCost">
            <template #default="{ row }">
              {{ Number(row.outTotalCost).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 结存 -->
        <el-table-column label="结存" align="center">
          <el-table-column label="数量" width="100" align="center" prop="balanceQty" />
          <el-table-column label="成本" width="100" align="center" prop="balanceCost">
            <template #default="{ row }">
              {{ Number(row.balanceCost).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table><br/>

      <!-- 分页 -->
      <div class="page-div">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="10"
          layout="total, ->, prev, pager, next, jumper"
          background
        />
      </div>

      
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed,watch } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import WareHouse from '@/views/basic/WareHouse.vue'
//仓库搜索选中结果
let warehouseVisible = ref(false)
let input = ref('')
let warehouseRef = ref();
watch(warehouseVisible, (newVisible) => {
    if(!newVisible) {
        if(warehouseRef.value) { //这里需要加上if判断，子组件中没有选择数据时为undefined，可能用于点击仓库，但是没选择，所以导致undefined报错
        input.value = warehouseRef.value.selectedArray.map(item => item.name).join(',')
        //获取到仓库编码，存数据库用，仓库name仅用作展示
        //用完之后清空，避免污染其他地方数据
        warehouseRef.value.clearSelected();
        }
    }
})


// 模拟数据：商品收发汇总表
const rawData = ref([
  {
    productCode: '95111111',
    productName: '吕类',
    barcode: '',
    specification: '',
    brand: '',
    rack: '',
    unit: '千克',
    warehouseCode: '1234',
    warehouse: '1234',
    remark: '',
    initialQty: 500,
    initialCost: 7500.00,
    purchaseQty: 200,
    purchaseCost: 18000.00,
    returnSalesQty: 0,
    returnSalesCost: 0,
    otherInQty: 0,
    otherInCost: 0,
    costAdjustQty: 0,
    costAdjustCost: 9.90,
    assemblyQty: 0,
    assemblyCost: 0,
    inTotalQty: 200,
    inTotalCost: 18000.00,
    returnPurchaseQty: 150,
    returnPurchaseCost: 13500.00,
    salesQty: 0,
    salesCost: 0,
    outTotalQty: 150,
    outTotalCost: 13500.00,
    balanceQty: 500,
    balanceCost: 7509.90
  },
  {
    productCode: '95111111',
    productName: '吕类',
    barcode: '',
    specification: '',
    brand: '',
    rack: '',
    unit: '千克',
    warehouseCode: 'CK001',
    warehouse: '默认仓库',
    remark: '',
    initialQty: 0,
    initialCost: 0,
    purchaseQty: 0,
    purchaseCost: 0,
    returnSalesQty: 0,
    returnSalesCost: 0,
    otherInQty: 0,
    otherInCost: 0,
    costAdjustQty: 0,
    costAdjustCost: 0,
    assemblyQty: 0,
    assemblyCost: 0,
    inTotalQty: 0,
    inTotalCost: 0,
    returnPurchaseQty: 0,
    returnPurchaseCost: 0,
    salesQty: 0,
    salesCost: 0,
    outTotalQty: 0,
    outTotalCost: 0,
    balanceQty: 50,
    balanceCost: 4500.00
  },
  {
    productCode: '2L004',
    productName: '土豆',
    barcode: '',
    specification: '',
    brand: '',
    rack: '',
    unit: '个',
    warehouseCode: 'CK001',
    warehouse: '默认仓库',
    remark: '',
    initialQty: 10,
    initialCost: 50.00,
    purchaseQty: 3,
    purchaseCost: 30.00,
    returnSalesQty: 0,
    returnSalesCost: 0,
    otherInQty: 0,
    otherInCost: 0,
    costAdjustQty: 0,
    costAdjustCost: 0,
    assemblyQty: 0,
    assemblyCost: 0,
    inTotalQty: 3,
    inTotalCost: 30.00,
    returnPurchaseQty: 0,
    returnPurchaseCost: 0,
    salesQty: 0,
    salesCost: 0,
    outTotalQty: 0,
    outTotalCost: 0,
    balanceQty: 13,
    balanceCost: 80.00
  },
  {
    productCode: '2L005',
    productName: '地板',
    barcode: '600*125*1',
    specification: '',
    brand: '',
    rack: '',
    unit: '箱',
    warehouseCode: '5',
    warehouse: '佛山，宜昌',
    remark: '',
    initialQty: 0,
    initialCost: 0,
    purchaseQty: 0,
    purchaseCost: 0,
    returnSalesQty: 0,
    returnSalesCost: 0,
    otherInQty: 0,
    otherInCost: 0,
    costAdjustQty: 0,
    costAdjustCost: 0,
    assemblyQty: 0,
    assemblyCost: 0,
    inTotalQty: 0,
    inTotalCost: 0,
    returnPurchaseQty: 0,
    returnPurchaseCost: 0,
    salesQty: 25,
    salesCost: 0,
    outTotalQty: 25,
    outTotalCost: 0,
    balanceQty: -25,
    balanceCost: 0
  },
  {
    productCode: '0',
    productName: 'SS1万基中配件',
    barcode: '',
    specification: '1箱6套',
    brand: '',
    rack: '',
    unit: '箱',
    warehouseCode: 'CK002',
    warehouse: '冷配库',
    remark: '',
    initialQty: 0,
    initialCost: 0,
    purchaseQty: 0,
    purchaseCost: 0,
    returnSalesQty: 0,
    returnSalesCost: 0,
    otherInQty: 0,
    otherInCost: 0,
    costAdjustQty: 0,
    costAdjustCost: 0,
    assemblyQty: 0,
    assemblyCost: 0,
    inTotalQty: 0,
    inTotalCost: 0,
    returnPurchaseQty: 0,
    returnPurchaseCost: 0,
    salesQty: 1,
    salesCost: 0,
    outTotalQty: 1,
    outTotalCost: 0,
    balanceQty: -1,
    balanceCost: 0
  },
  {
    productCode: '0',
    productName: 'SS1万基中配件',
    barcode: '',
    specification: '1箱6套',
    brand: '',
    rack: '',
    unit: '箱',
    warehouseCode: 'CK001',
    warehouse: '默认仓库',
    remark: '',
    initialQty: 0,
    initialCost: 0,
    purchaseQty: 4,
    purchaseCost: 0,
    returnSalesQty: 0,
    returnSalesCost: 0,
    otherInQty: 0,
    otherInCost: 0,
    costAdjustQty: 0,
    costAdjustCost: 0,
    assemblyQty: 0,
    assemblyCost: 0,
    inTotalQty: 4,
    inTotalCost: 0,
    returnPurchaseQty: 0,
    returnPurchaseCost: 0,
    salesQty: 0,
    salesCost: 0,
    outTotalQty: 0,
    outTotalCost: 0,
    balanceQty: 4,
    balanceCost: 0
  },
  {
    productCode: '1',
    productName: '测试审核流程',
    barcode: '',
    specification: '',
    brand: '',
    rack: '',
    unit: '瓶',
    warehouseCode: '1234',
    warehouse: '1234',
    remark: '',
    initialQty: 0,
    initialCost: 0,
    purchaseQty: 3,
    purchaseCost: 0,
    returnSalesQty: 0,
    returnSalesCost: 0,
    otherInQty: 0,
    otherInCost: 0,
    costAdjustQty: 0,
    costAdjustCost: 0,
    assemblyQty: 0,
    assemblyCost: 0,
    inTotalQty: 3,
    inTotalCost: 0,
    returnPurchaseQty: 0,
    returnPurchaseCost: 0,
    salesQty: 0,
    salesCost: 0,
    outTotalQty: 0,
    outTotalCost: 0,
    balanceQty: 3,
    balanceCost: 0
  }
])

// 搜索表单
const searchForm = reactive({
  startDate: '',
  endDate: '',
  warehouse: '',
  productName: '',
  category: ''
})

// 计算唯一选项用于下拉框
// const uniqueWarehouses = computed(() => [...new Set(rawData.value.map(i => i.warehouse))])
const uniqueProductNames = computed(() => [...new Set(rawData.value.map(i => i.productName))])
const uniqueCategories = computed(() => [...new Set(rawData.value.map(i => i.category))])

// 过滤后的数据显示
const displayData = computed(() => {
  return rawData.value.filter(item => {
    const matchesDate = (!searchForm.startDate || item.date >= searchForm.startDate) &&
                        (!searchForm.endDate || item.date <= searchForm.endDate)
    const matchesWarehouse = !searchForm.warehouse || item.warehouse === searchForm.warehouse
    const matchesName = !searchForm.productName || item.productName === searchForm.productName
    const matchesCat = !searchForm.category || item.category === searchForm.category

    return matchesDate && matchesWarehouse && matchesName && matchesCat
  })
})

// 加载状态
const loading = ref(false)

// 查询与重置
const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}

const resetSearch = () => {
  searchForm.startDate = ''
  searchForm.endDate = ''
  searchForm.warehouse = ''
  searchForm.productName = ''
  searchForm.category = ''
}

// 导出功能
const handleExport = () => {
  alert('导出功能已触发，可在此实现 Excel 导出逻辑')
}

// 打印功能
const handlePrint = () => {
  window.print()
}
</script>

<style scoped>


.table-header-buttons {
  margin-top: 10px;
  text-align: right;
}

::v-deep(.el-table tbody tr:hover > td) {
  background-color: #edd4587d !important;
  border-bottom-color: #c78e39;
}

::v-deep(.el-table .el-table__body td) {
  padding: 8px 0;
  height: 35px;
}

::v-deep(.el-table .el-table__header th) {
  padding: 10px 0;
  height: 25px;
  background-color: #f5f7fa;
}

::v-deep(.el-table__footer) {
  background-color: #d6d847bc !important;
  font-weight: bold;
  font-size: 14px;
}

</style>